<template>
  <div>
    <!-- 顶部搜索 -->
    <Mynav>
      <p class="classify">分类</p>
    </Mynav>
    <!-- 攻略界面 -->

    <!-- 猜你喜欢 -->
    <div class="strategy">
      <mycontent :getdata="youlike" />
    </div>
    <!-- 热门攻略 -->
    <div class="box">
      <div class="content-top">
        <div class="content-left">
          <span>{{ title }}</span>
        </div>
        <div class="content-right">更多>></div>
      </div>
      <Main :hot="hot"/>
      <!-- <div class="main" v-for="(item, index) in hot" :key="index">
        <div class="main-top">
          <img :src="item.head" alt="" />
          <span>{{ item.user }}</span>
        </div>
        <div class="main-mid">{{ item.info }}</div>
        <div class="main-bottom">
          <img :src="item.img" alt="" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import api from "../../api";
import Mynav from "../../components/mynav.vue";
import mycontent from "../../components/mycontent.vue";
import Main from '../../components/main.vue'

export default {
  data() {
    return {
      youlike: {},
      hot: [],
      title: "",
    };
  },
  components: {
    Mynav,
    mycontent,
    Main,

  },
  mounted() {
    api.youlike().then((res) => {
      if (res.data.status === 200) {
        this.youlike = res.data.result;
      }
    });
    api.hot().then((res) => {
      if (res.data.status === 200) {
        console.log(res.data.result);
        this.hot = res.data.result;
        this.title = res.data.title;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.classify {
  font-size: 0.2rem;
  margin-right: 0.38rem;
  margin-top: 0.4rem;
}
.strategy {
  margin-top: 1rem;
}
.box {
  width: 100%;
  .content-top {
    width: 100%;
    height: 0.5rem;
    border-top: 0.2rem solid #e5e5e5;
    .content-left {
      width: 2.5rem;
      height: 0.5rem;
      float: left;
      span {
        position: relative;
        top: 0.2rem;
        left: 0.2rem;
        border-left: 0.08rem solid #7acf9b;
      }
    }
    .content-right {
      width: 0.8rem;
      height: 0.5rem;
      float: right;
      position: relative;
      top: 0.2rem;
      right: 0.2rem;
    }
  }
  // .main {
  //   width: 100%;
  //   margin-bottom: 0.4rem;
  //   .main-top {
  //     width: 100%;
  //     height: 0.8rem;
  //     position: relative;
  //     border-top: 0.02rem solid #e5e5e5;
  //     img {
  //       position: relative;
  //       width: 0.6rem;
  //       height: 0.6rem;
  //       border-radius: 50%;
  //       top: 0.2rem;
  //       left: 0.2rem;
  //       margin-right: 0.35rem;
  //     }
  //   }
  //   .main-mid {
  //     width: 100%;
  //     font-size: 0.2rem;
  //     line-height: 0.3rem;
  //     margin: 0.15rem;
  //     overflow: hidden;
  //     text-overflow: ellipsis;
  //     display: -webkit-box;
  //     -webkit-line-clamp: 4;
  //     -webkit-box-orient: vertical;
  //   }
  //   .main-bottom {
  //     width: 100%;
  //     height: 3rem;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //       margin: 0.2rem;
  //       margin-top: 0.1rem;
  //     }
  //   }
  // }
}
</style>